<!--
 * @Description: 校园精英PK赛统计列表
 * @Author: along
 * @Date: 2021/08/09
 * @Last Modified by: along
 * @Last Modified time: 2021/08/09
-->
<template>
    <div class="wrapper">
        <div class="__header">
            <div class="__header_left">
                <p class="__header_lines" />
                <p class="__header_title">统计列表:</p>
                <el-button
                    :type="activeName == 'elite-rank' ? 'primary' : 'default'"
                    size="small"
                    :style="{width: '94px', marginRight: '22px'}"
                    @click="handleTabClick('elite-rank')"
                >
                    精英排行榜
                </el-button>
                <el-button
                    :type="activeName == 'school-rank' ? 'primary' : 'default'"
                    size="small"
                    :style="{width: '94px', marginRight: '22px'}"
                    @click="handleTabClick('school-rank')"
                >
                    商品排行榜
                </el-button>
                <el-button
                    :type="activeName == 'elite-send' ? 'primary' : 'default'"
                    size="small"
                    :style="{width: '102px', marginRight: '22px'}"
                    @click="handleTabClick('elite-send')"
                >
                    个人奖励派发
                </el-button>
                <el-button
                    :type="activeName == 'school-award' ? 'primary' : 'default'"
                    size="small"
                    :style="{width: '102px', marginRight: '22px'}"
                    @click="handleTabClick('school-award')"
                >
                    学校奖励派发
                </el-button>
            </div>
            <p
                v-if="!!row.data.activity_start_time && !!row.data.activity_end_time"
                class="__header_time"
            >
                当前期数时间: {{ row.data.activity_start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }} - {{ row.data.activity_end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                <span v-if="row.data.type == 'elite-send'">&nbsp;&nbsp;距离结算期: 还剩{{ row.data.rank_end_time }}天</span>
            </p>
        </div>
        <div class="content-wrapper">
            <elite-rank
                v-if="activeName == 'elite-rank'"
                ref="eliteRank"
                @emit="getInfo"
            />
            <school-rank
                v-if="activeName == 'school-rank'"
                ref="schoolRank"
                @emit="getInfo"
            />
            <elite-send
                v-if="activeName == 'elite-send'"
                ref="eliteSend"
                @emit="getInfo"
            />
            <school-award
                v-if="activeName == 'school-award'"
                @emit="getInfo"
            />
        </div>
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import eliteRank from "./elite-rank";
import schoolRank from "./goods-rank";
import eliteSend from "./elite-send";
import SchoolAward from "./school-award";

export default {
    name: "PkStatisticsList",
    mixins: [back],
    components: {
        SchoolAward,
        eliteRank, schoolRank, eliteSend
    },
    data() {
        return {
            activeName: 'elite-rank',
            settingDialog: false,
            mode: 'normal', // normal: 查看 edit： 编辑
            row: {
                type: '',
                data: {
                    activity_start_time: '',
                    activity_end_time: '',
                    rank_end_time: 0
                }
            }
        };
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '校园精英PK赛'}, {title: '统计列表'}]);
        this.activeName = this.$route.query.active || 'elite-rank';
    },
    methods: {
        getInfo (row) {
            console.log('row', row);
            this.row = {
                ...row
            };
        },

        handleTabClick(active) {
            this.activeName = active;
            this.$router.push({
                query: {
                    active,
                },
            });
        }
    },

};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;
    height: 100%;
    .__header {
        height: 78px;
        display: flex;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        background-color: #fff;
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 12px;
        justify-content: space-between;
        align-items: center;
        .__header_left {
            display: flex;
            align-items: center;
            margin-left: 24px;
            .__header_lines {
                width: 3px;
                height: 20px;
                background-color: rgba(24, 144, 255, 1);
                margin-right: 8px;
            }
            .__header_title {
                color: rgba(51, 51, 51, 1);
                font-size: 20px;
                font-weight: 500;
                margin-right: 24px;
                white-space: nowrap;
            }
        }
        .__header_time {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            margin-right: 32px;
        }
    }
    .content-wrapper {
        display: flex;
        height: calc(100% - 102px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        margin-top: 0px;
        .btn {
            position: absolute;
            right: 12px;
            top: 8px;
        }

        /deep/ .el-tabs.top-bar {
            height: 100%;

            .el-tabs__nav-wrap {
                height: 54px;
                padding-left: 24px;

                .el-tabs__nav-scroll {
                    .el-tabs__nav {
                        height: 54px;
                        line-height: 54px;
                    }
                }
            }

            .el-tabs__content {
                height: calc(100% - 67px);

                .el-tab-pane {
                    height: 100%;
                    overflow-y: auto;
                }
            }
        }
    }

    /deep/ .el-dialog {
        margin-top: 15vh !important;

        .el-dialog__header {
            padding-top: 10px;
            box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;

            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }

            .el-icon-close:before {
                color: rgb(194, 194, 194);
                font-size: 17px;
                font-weight: bold;
            }

            .el-dialog__headerbtn {
                top: 14px;
            }
        }

        .el-dialog__body {
            padding: 24px 24px 0;
            max-height: 500px;
            overflow-y: auto;
        }

        .el-textarea__inner {
            resize: none;
        }

        .el-dialog__footer {
            text-align: center;
            padding-bottom: 30px;
            margin-top: 6px;
        }
    }
    /deep/ .el-form-item {
        margin-bottom: 0;
    }
    /deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
        box-shadow: none;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
}
</style>

